<template>
  <div class="head3">
    <div class="head_a">
      <i class="head_a_l" style=""></i>
      <i class="head_a_c">
        <p class="head_time">统计时间：2018-10-10</p>
      </i>
      <i class="head_a_r"></i>
    </div>
    <div class="head_c"><h2>可视化头部标题</h2></div>
    <div class="head_b">
      <i class="head_a_l"></i>
      <i class="head_b_c">
        <ul class="ul_head">
          <li class="ul_head_1">
            <a href="#">
              菜单1
            </a>
          </li>
          <li class="ul_head_2 active">
            <a href="#">
              菜单2
            </a>
          </li>
          <li class="ul_head_3">
            <a href="#">
              菜单3
            </a>
          </li>
          <li class="ul_head_4">
            <a href="#">
              菜单4
            </a>
          </li>
        </ul>
      </i>
      <i class="head_a_r"></i>
    </div>
    <i class="moves1"></i>
  </div>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
</script>

<style lang="less" scoped>
.head3 .head_c{height:52px ; width:469px ; margin-left: -35px; background: url(~@/assets/images/head/head3/logo_c.png) no-repeat center center; display: inline-block; float: left; text-align: center; padding-top: 2px;}
.head3 .head_c h2{
  font-size: 28px;
  background-image: linear-gradient(to bottom, #fff, #bfecfd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.head3 .head_a{height: 52px; width: calc(40% - 150px); position: relative; display: inline-block; float: left; left: 10px;}
.head3 .head_a_l{position: absolute; top: 0px; width: 50px;}
.head3 .head_a i{display: inline-block; position: absolute; height: 52px;}
.head3 .head_a .head_a_l{background: url(~@/assets/images/head/head3/logo_a.png) no-repeat; left: 0px; }
.head3 .head_a_r{position: absolute; top: 0px; width: 83px;background: url(~@/assets/images/head/head3/logo_b.png)  no-repeat; right: 0px; left: auto;}
.head3 .head_b{width: calc(60% - 250px); position: absolute; display: inline-block; height: 52px; right: 10px;}
.head3 .head_b .head_a_l{background: url(~@/assets/images/head/head3/logo_b1.png)  no-repeat;left: 0px; width: 83px; height: 52px;}
.head3 .head_a .head_a_c{width: calc(100% - 133px); display: inline-block;float: left; background: url(~@/assets/images/head/head3/logo_c1.png) no-repeat; background-size:100% 100% ;position: absolute; left: 50px; top: 0px;}
.head3 .head_b .head_b_c{width: calc(100% - 133px); display: inline-block;float: left; background: url(~@/assets/images/head/head3/logo_c2.png) no-repeat; background-size:100% 100% ; height: 52px; position: absolute; top: 0px; left: 83px;}
.head3 .head_b .head_a_r{width: 50px; height: 52px; background: url(~@/assets/images/head/head3/logo_a1.png) no-repeat top; background-size:100% 100% ; position: absolute; right: 0px;}
.head3 .head_time{font-size: 14px; color: #c8f7ff; font-style: initial; padding-top: 14px; margin-left: -10px;}
.head3 .ul_head{float: right; display: inline-block; height: 40px; line-height: 40px; margin-top: 4px; font-style: initial;}
.head3 .ul_head li{float:left; margin-right: 10px; margin-left: 20px;}
.head3 .ul_head li a{display: block; padding-left: 36px; color: #c8f7ff; font-size: 18px;}
.head3 .ul_head_1 a{background: url(~@/assets/images/head/head3/icon_head_a.png) no-repeat left center;}
.head3 .ul_head_1 a:hover,.head3 .ul_head_1.active a{background: url(~@/assets/images/head/head3/icon_head_a1.png) no-repeat left center; color: #f7e852;}
.head3 .ul_head_2 a{background: url(~@/assets/images/head/head3/icon_head_b.png) no-repeat left center;}
.head3 .ul_head_2 a:hover,.head3 .ul_head_2.active a{background: url(~@/assets/images/head/head3/icon_head_b1.png) no-repeat left center; color: #f7e852;}
.head3 .ul_head_3 a{background: url(~@/assets/images/head/head3/icon_head_c.png) no-repeat left center;}
.head3 .ul_head_3 a:hover,.head3 .ul_head_3.active a{background: url(~@/assets/images/head/head3/icon_head_c1.png) no-repeat left center; color: #f7e852;}
.head3 .ul_head_4 a{background: url(~@/assets/images/head/head3/icon_head_d.png) no-repeat left center;}
.head3 .ul_head_4 a:hover,.head3 .ul_head_4.active a{background: url(~@/assets/images/head/head3/icon_head_d1.png) no-repeat left center; color: #f7e852;}
</style>